<template>
    <div>
        <div class="body-content">
            <div class="content-main">
                <div class="bodys start">
                    <div class="vbox" style="height: auto;">
                        <div class="within adapt-pc" style="padding-top:0;">
                            <span><router-link to="/" class="icon-pull-left" style="margin-left:10px;">返回首页</router-link></span>
                        </div>
                    </div>
                </div>

                <div class="bodys start">
		            <div class="vbox">
                        <div class="vleft e1">
                            <div class="box va">
                                <div class="tit">新加坡</div>
                                <ul>
                                    <li v-for="(c,index) of cities" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox1(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">日本</div>
                                <ul>
                                    <li v-for="(c,index) of rb" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox2(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">马来西亚</div>
                                <ul>
                                    <li v-for="(c,index) of mlxy" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox3(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">中国香港</div>
                                <ul>
                                    <li v-for="(c,index) of xg" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox4(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">韩国</div>
                                <ul>
                                    <li v-for="(c,index) of bz" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox5(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">泰国</div>
                                <ul>
                                    <li v-for="(c,index) of tg" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox6(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">其他</div>
                                <ul>
                                    <li v-for="(c,index) of others" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox7(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">新西兰</div>
                                <ul>
                                    <li v-for="(c,index) of xxl" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox8(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">澳大利亚</div>
                                <ul>
                                    <li v-for="(c,index) of adly" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox9(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">瓦努阿图</div>
                                <ul>
                                    <li v-for="(c,index) of anwt" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox10(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">加拿大</div>
                                <ul>
                                    <li v-for="(c,index) of jnd" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox11(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">美国</div>
                                <ul>
                                    <li v-for="(c,index) of usa" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox12(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">格林纳达</div>
                                <ul>
                                    <li v-for="(c,index) of glgn" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbo13x(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">多米尼克</div>
                                <ul>
                                    <li v-for="(c,index) of dmnk" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox14(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">圣卢西亚</div>
                                <ul>
                                    <li v-for="(c,index) of slny" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox15(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">土耳其</div>
                                <ul>
                                    <li v-for="(c,index) of teq" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox16(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">英国</div>
                                <ul>
                                    <li v-for="(c,index) of yg" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox17(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">西班牙</div>
                                <ul>
                                    <li v-for="(c,index) of xby" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox18(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">葡萄牙</div>
                                <ul>
                                    <li v-for="(c,index) of pty" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox19(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">希腊</div>
                                <ul>
                                    <li v-for="(c,index) of xl" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox20(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">塞浦路斯</div>
                                <ul>
                                    <li v-for="(c,index) of spls" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox21(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">爱尔兰</div>
                                <ul>
                                    <li v-for="(c,index) of ael" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox22(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
                            <div class="box va">
                                <div class="tit">马耳他</div>
                                <ul>
                                    <li v-for="(c,index) of met" :key="index"
                                        :class="{checked:c.bOn}"
                                        @click="checkbox23(index,c)">
                                        {{c.city}}
                                    </li>
                                </ul>
                            </div>
			            </div>
                        <div class="vleft e2">
                            <div class="box vselect vd">
                                <div class="tit">
                                    <div class="title" style="width:65px;">移民目的</div>
                                    <div>
                                        <el-select v-model="value" placeholder="请选择">
                                            <el-option
                                            v-for="item in age"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        <div class="vleft e3">
                            <div class="inp-box" >
                                <div class="sjh">
                                    <span class="sjh-tit">您的姓名：</span>
                                    <input type="text" name="phone" value="" v-model="contacts">
                                </div>
                            </div>
                            <div class="inp-box" >
                                <div class="sjh">
                                    <span class="sjh-tit">您的电话：</span>
                                    <input type="text" name="phone" value="" v-model="contactsPhone">
                                </div>
                            </div>
                            <div class="click"><a href="#v4" class="button" @click="save">免费获取资料</a></div>
                        </div>
		            </div>
	            </div>
                <div class="bodys end" style="padding-bottom: 20px;" v-if="promptshow">
                    <div class="vbox" style="height: auto;">
                        <div class="within adapt-m" id="v4">
                            <em>提交成功</em>
                            <img src="/Public/Home/img/end_phone.png" alt="">
                            <p>您的私人规划师会在2小时内跟您沟通</p>
                            <span>工作时间(8:00—20:00),公休假日可能会顺延.</span>
                            <div class="click"><a href="/" class="button" style="margin-left:10px;">返回首页</a></div>
                        </div>
                    </div>
                </div>

                <div class="click-box" v-if="promptshow">
                    <div>
                        <img src="@/assets/image/success.png" alt="" class="dui">
                        <img src="@/assets/image/close.png" alt="" class="cuo xxx" @click="close">
                        <span>您的私人规划师会在2小时内跟您沟通～</span>
                        <p>我们会对您的电话严格保密，请保持电话畅通。<br/>公休假日可能会顺延，请您耐心等候。</p>
                        <em class="xxx" @click="konwbtn">我知道了</em>
                    </div>
                </div>                                                                               
                
            </div>
        </div>
    </div>
</template>
<script>
import { apply} from '@/api/index'
export default {
    data(){
        return{
            contacts:'',
            contactsPhone:'',
            cities : [
                {city:"新加坡创业EP",bOn:false},
            ],
            rb : [
                {city:"日本留学",bOn:false},
                {city:"日本经营管理签证",bOn:false},
            ],
            mlxy : [
                {city:"马来西亚第二家园计划",bOn:false},
            ],
            xg : [
                {city:"香港输入内地人才计划",bOn:false},
                {city:"香港优秀人才入境计划",bOn:false},
                {city:"香港进修保录计划",bOn:false},
            ],
            bz : [
                {city:"韩国存款移民",bOn:false},
            ],
            tg : [
                {city:"泰国精英签证",bOn:false},
            ],
            others : [
                {city:"香港高端人才通行证计划",bOn:false},
            ],
            xxl : [
                {city:"新西兰留学",bOn:false},
                {city:"新西兰主动投资者签证",bOn:false},
                {city:"新西兰技术移民六分制",bOn:false},
                {city:"新西兰绿名单快速移民通道",bOn:false},
            ],
            adly : [
                {city:"澳大利亚留学",bOn:false},
                {city:"澳洲GTI全球人才项目",bOn:false},
                {city:"澳洲188A商业创新签证",bOn:false},
                {city:"澳洲188B投资者签证项目",bOn:false},
                {city:"澳洲188C重大投资者签证",bOn:false},
                {city:"澳洲189独立技术移民",bOn:false},
                {city:"澳洲190州政府担保技术移民",bOn:false},
                {city:"澳洲491偏远地区州担保移民",bOn:false},
            ],
            anwt : [
                {city:"瓦努阿图投资移民",bOn:false},
                {city:"瓦努阿图永居项目",bOn:false},
            ],
            jnd : [
                {city:"加拿大留学",bOn:false},
                {city:"加拿大联邦创业投资移民",bOn:false},
                {city:"加拿大阿省雇主担保移民",bOn:false},
                {city:"加拿大萨省商业移民",bOn:false},
                {city:"加拿大BC省雇主担保移民",bOn:false},
                {city:"加拿大联邦自雇移民",bOn:false},
                {city:"加拿大曼省留学移民",bOn:false},
                {city:"加拿大跨国高管ICT签证",bOn:false},
                {city:"加拿大萨省雇主担保移民",bOn:false},
                {city:"加拿大准居民项目",bOn:false},
                {city:"魁省雇主担保移民",bOn:false},
            ],
            usa : [
                {city:"美国留学",bOn:false},
                {city:"美国EB-1A杰出人才移民",bOn:false},
                {city:"美国EB-2 NIW国家利益豁免移民",bOn:false},
                {city:"美国EB-1C跨国高管移民",bOn:false},
                {city:"美国EB-5投资移民",bOn:false},
                {city:"美国L-1签证",bOn:false},
                {city:"美国EB-2高学历技术人才移民",bOn:false},
                {city:"美国EB-3职业移民",bOn:false},
            ],
            glgn : [
                {city:"格林纳达投资移民（捐款类）",bOn:false},
            ],
            dmnk : [
                {city:"多米尼克投资移民(捐款)",bOn:false},
            ],
            slny : [
                {city:"圣卢西亚投资移民",bOn:false},
            ],
            teq : [
                {city:"土耳其投资移民",bOn:false},
            ],
            yg : [
                {city:"英国创新创始人签证",bOn:false},
                {city:"英国留学",bOn:false},
            ],
            xby : [
                {city:"西班牙购房移民",bOn:false},
                {city:"西班牙非盈利移民项目",bOn:false},
            ],
            pty : [
                {city:"葡萄牙购房移民",bOn:false},
                {city:"葡萄牙基金移民项目",bOn:false},
            ],
            xl : [
                {city:"希腊购房移民",bOn:false},
                {city:"希腊40万欧元存款移民项目",bOn:false},
            ],
            spls : [
                {city:"塞浦路斯购房移民",bOn:false},
            ],
            ael : [
                {city:"爱尔兰捐款移民项目",bOn:false},
                {city:"爱尔兰投资移民",bOn:false},
                {city:"爱尔兰基金移民",bOn:false},
            ],
            met : [
                {city:"马耳他永居项目",bOn:false},
            ],
            valueList : [
                {vauke:"子女教育",bOn:false},
                {vauke:"海外生育",bOn:false},
                {vauke:"资产配置",bOn:false},
                {vauke:"海外医疗",bOn:false},
                {vauke:"出入境方便",bOn:false},
                {vauke:"海外置业",bOn:false},
            ],
            contractTagList:[],//选中的移民国家
            vaukeList:[],//选中的看重
            options: [{
                value: '选项1',
                label: '100万以内'
                }, {
                value: '选项2',
                label: '100-500万元'
                }, {
                value: '选项3',
                label: '500万元以上'
                }, 
            ],
            value: '',
            years: [{
                value: '选项1',
                label: '3年以下'
                }, {
                value: '选项2',
                label: '3-5年'
                }, {
                value: '选项3',
                label: '5年以上'
                }, 
            ],
            education: [{
                value: '选项1',
                label: '高中或技校职高'
                }, {
                value: '选项2',
                label: '大专'
                }, {
                value: '选项3',
                label: '本科学士学位'
                }, {
                value: '选项4',
                label: '硕士学位及以上'
                }, 
            ],
            age: [{
                value: '子女教育,海外生育,资产配置,海外医疗,出入境方便,海外置业',
                label: '全部'
                },{
                value: '子女教育',
                label: '子女教育'
                }, {
                value: '海外生育',
                label: '海外生育'
                }, {
                value: '资产配置',
                label: '资产配置'
                }, {
                value: '海外医疗',
                label: '海外医疗'
                },  {
                value: '出入境方便',
                label: '出入境方便'
                },  {
                value: '海外置业',
                label: '海外置业'
                }, 
            ],
            n : -1,
            o:-1,
            promptshow:false,
        }
    },
    methods: {
        checkbox1(i,c){
            this.cities[i].bOn = !this.cities[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox2(i,c){
            this.rb[i].bOn = !this.rb[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox3(i,c){
            this.mlxy[i].bOn = !this.mlxy[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox4(i,c){
            this.xg[i].bOn = !this.xg[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox5(i,c){
            this.bz[i].bOn = !this.bz[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox6(i,c){
            this.tg[i].bOn = !this.tg[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox7(i,c){
            this.others[i].bOn = !this.others[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox8(i,c){
            this.xxl[i].bOn = !this.xxl[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox9(i,c){
            this.adly[i].bOn = !this.adly[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox10(i,c){
            this.anwt[i].bOn = !this.anwt[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox11(i,c){
            this.jnd[i].bOn = !this.jnd[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox12(i,c){
            this.usa[i].bOn = !this.usa[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox13(i,c){
            this.glgn[i].bOn = !this.glgn[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox14(i,c){
            this.dmnk[i].bOn = !this.dmnk[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox15(i,c){
            this.slny[i].bOn = !this.slny[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox16(i,c){
            this.teq[i].bOn = !this.teq[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox17(i,c){
            this.yg[i].bOn = !this.yg[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox18(i,c){
            this.xby[i].bOn = !this.xby[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox19(i,c){
            this.pty[i].bOn = !this.pty[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox20(i,c){
            this.xl[i].bOn = !this.xl[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox21(i,c){
            this.spls[i].bOn = !this.spls[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox22(i,c){
            this.ael[i].bOn = !this.ael[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checkbox23(i,c){
            this.met[i].bOn = !this.met[i].bOn;
            if (this.contractTagList.includes(c.city)) {
                this.contractTagList.splice(this.contractTagList.indexOf(c.city), 1)
            } else {
                this.contractTagList.push(c.city)
            }
        },
        checvalue(i,item){
            this.valueList[i].bOn = !this.valueList[i].bOn;
            if (this.vaukeList.includes(item.vauke)) {
                this.vaukeList.splice(this.vaukeList.indexOf(item.vauke), 1)
            } else {
                this.vaukeList.push(item.vauke)
            }
        },
        changeList(index){
            this.n = index;//this指向app
        },
        changetime(index){
            this.o = index;//this指向app
        },
        save(){
            if(!this.contacts){
                this.$message.error( '请输入您的姓名');
                return;
            }
            if (!/^1[0-9]{10}$/.test(this.contactsPhone)){
                this.$message.error( '请输入手机号');
                return;
            }
            apply({
                contacts:this.contacts,
                contactsPhone:this.contactsPhone,
                dataDemand:this.contractTagList.join(","),
                objective:this.value,
            }).then(res => {
                if (res.success) {
                    this.promptshow = true
                    this.$message.success('保存成功')
                    
                }
            })
        },
        konwbtn(){
            this.promptshow = false
            this.$router.go(-1)
        },
        close(){
            this.promptshow = false
        },
    },
    name: "Project",
}
</script>
<style lang="scss">
@import "src/assets/css/index";
@import "src/assets/css/base";
@import "src/assets/css/common";
@import "src/assets/css/project-index";
@import "src/assets/css/tooltip";
@import "src/assets/css/volume";
</style>
<style lang="scss" scoped>
.body-content{
    .project-banner{
        height: 300px;
        .swiper-pagination{
            bottom: 20px;
            text-align: center;
            width: 200px !important;
            margin-left: -50px;
        }
    }
}

</style>